import { ref, computed } from "vue"
import { useDict } from "@/dict"
import { COLLAPSE } from "@/constant"
// 是否收起、展开菜单栏
const isCollapse = ref(false)
// 是否沉浸式
const isImmersive = ref(false)
/** status value */
let statusValue = {}
// 索引
const idx = ref((sessionStorage.getItem(COLLAPSE)*1) || 1)
// 组合式函数
export function useCollapse(){
    // 获取字典数据
    const { useDictList } = useDict()
    statusValue = useDictList('collapseStatusModules')
    // 获取状态
    const getStatusValue = computed(() => statusValue[idx.value])
    // 获取收起、展开状态
    const useGetCollapse = () => getStatusValue.value?.flat
    // 获取沉浸式状态
    const useGetImmersive = () => getStatusValue.value?.immersive
    // 更新菜单栏状态
    const useToggleCollapse = () => {
        // 累加
        idx.value++
        idx.value = (idx.value > 3) ? 1 : idx.value
        // 是否沉浸式
        isImmersive.value = getStatusValue.value?.immersive
        // 是否收起、展开菜单栏
        isCollapse.value = getStatusValue.value?.flat
        // 本地存储
        sessionStorage.setItem(COLLAPSE, idx.value)
    }
    return {
        useToggleCollapse,
        useGetCollapse,
        useGetImmersive
    }

}
